<template>
	<div class="container">
		<!-- 顶部标题 -->
		<div class="header">
			<h1 class="main-title">拆盲盒得乐豆</h1>
			<!-- <p class="sub-title">收集金碎片，解锁稀有奖励！</p> -->
		</div>

		<!-- 新增横向滚动图片列表 -->
		<!-- <div class="image-scroll-wrapper">
			<div class="image-scroll">
				<div v-for="(img, index) in imageList" :key="index" class="image-item">
					<img :src="img" alt="">
				</div>
			</div>
		</div> -->

		<view class="slide">
			<view class="slide-scorll">
				<image src="/static/blind/b1.png" class="img"></image>
				<image src="/static/blind/b1.png" class="img"></image>
				<image src="/static/blind/b1.png" class="img"></image>
				<image src="/static/blind/b1.png" class="img"></image>
				<image src="/static/blind/b1.png" class="img"></image>
				<image src="/static/blind/b1.png" class="img"></image>
				<image src="/static/blind/b1.png" class="img"></image>
				<image src="/static/blind/b1.png" class="img"></image>
			</view>
		</view>

		<!-- 用户资产 -->
		<view class="dou">
			<view class="dou-left">
				<image src="/static/blind/mk.png"></image>
				<view>乐豆：{{detail.userWalletResponse.beans}}</view>
			</view>
			<view class="dou-right">
				<image src="/static/blind/sp.png"></image>
				<view>盲卡：{{detail.userWalletResponse.blindCard}} 张</view>
			</view>
		</view>

		<view>
			<view class="tab-container">
				<!-- 导航按钮 -->
				<view class="tab-nav">
					<view v-for="(item, index) in tabList" :key="index" class="tab-button"
						:class="[currentIndex === index ? 'active' : '']" @tap="handleSwitch(index)">
						{{item.id}}
					</view>
				</view>

				<!-- 滑动内容区域 -->
				<swiper class="tab-content" :current="currentIndex" @change="swiperChange" :duration="300"
					:disable-touch="false">
					<swiper-item v-for="(item, index) in tabList" :key="index">
						<view class="content-item">
							<image :src="item.image" mode="aspectFit" class="content-image" :lazy-load="true" />
						</view>
					</swiper-item>
				</swiper>
				<!-- <view class="content-left">

				</view> -->
				<view class="content-right">
					<view>
						<image src="../../static/blind/kxjs.png" class="right-kx"></image>
					</view>
					<view @click="goExchange()">
						<image src="../../static/blind/ljdh.png" class="right-lj"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="center">
				<button class="btn neon-btn" @click="onAlert">立即开箱</button>
			</view>
			<view class="bottom-right">
				<view>{{detail.userWalletResponse.locks || 0}}</view>
				<view>金钥匙</view>
			</view>
		</view>
		<!-- <FullScreenAd></FullScreenAd> -->
	</div>
</template>

<script>
	import MH from "./compent/index.vue"
	import FullScreenAd from "@/components/FullScreenAdvertis/index.vue"
	import {
		getinfoDetail,
		open,
		advertList
	} from '@/api/new.js';
	import k1 from "../../static/blind/k1.png"
	import k2 from "../../static/blind/k2.png"
	import k3 from "../../static/blind/k3.png"
	import k4 from "../../static/blind/k4.png"
	import k5 from "../../static/blind/k5.png"
	import k6 from "../../static/blind/k6.png"
	import k7 from "../../static/blind/k7.png"
	export default {
		components: {
			MH,
			FullScreenAd
		},
		data() {
			return {
				babyBalance: 0.00,
				blindCards: 0,
				keys: 3,
				collectedFragments: 0,
				isCollapsed: true,
				imageList: [
					require('@/static/blind/b1.png'),
					require('@/static/blind/b1.png'),
					require('@/static/blind/b1.png'),
					require('@/static/blind/b1.png'),
					require('@/static/blind/b1.png'),
					require('@/static/blind/b1.png'),
					require('@/static/blind/b1.png'),
					require('@/static/blind/b1.png')
				],
				title: 'Hello',
				detail: {},
				id: null,
				currentIndex: 0,
				tabList: [{
						image: k1,
						id: "通1"
					},
					{
						image: k2,
						id: "通2"
					},
					{
						image: k3,
						id: "通3"
					},
					{
						image: k4,
						id: "通4"
					},
					{
						image: k5,
						id: "通5"
					},
					{
						image: k6,
						id: "通6"
					},
					{
						image: k7,
						id: "通7"
					}
				]
			}
		},
		onLoad(options) {
			let that = this
			that.id = options.id
			this.getdetail();
			// this.GetAdvlist()
			// setInterval(() => {
			// 	const container = this.$el.querySelector('.image-scroll')
			// 	if (container) {
			// 		const newScrollLeft = container.scrollLeft + 300
			// 		container.scrollTo({
			// 			left: newScrollLeft,
			// 			behavior: 'smooth'
			// 		})
			// 		// 滚动到末尾时重置
			// 		if (newScrollLeft >= container.scrollWidth - container.clientWidth) {
			// 			container.scrollLeft = 0
			// 		}
			// 	}
			// }, 1000) // 3秒滚动一次
		},
		computed: {
			progress() {
				return (this.collectedFragments / 10) * 100
			}
		},
		methods: {
			// GetAdvlist() {
			// 	advertList().then((res) => {
			// 		console.log(res)
			// 	}).catch(err => {});
			// },
			toggleCollapse() {
				this.isCollapsed = !this.isCollapsed
			},
			singleOpen() {
				if (this.keys > 0) {
					this.keys--
					this.blindCards++
					if (Math.random() < 0.1) {
						this.collectedFragments++
					}
				}
			},
			openBox(type) {
				console.log(`打开${type}盲盒`)
			},
			getdetail: function() {
				this.loading = true
				const id = this.id
				getinfoDetail(id).then((res) => {
					this.detail = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			onAlert: function() {
				if (this.detail.userWalletResponse.locks === 0) {
					uni.navigateTo({
						url: `/pages/blind/into?id=${this.id}`
					})
				} else {
					this.submit()
				}
			},
      //跳转兑换
      goExchange() {
        uni.navigateTo({
          url: `/pages/blind/into?id=${this.id}`
        })
      },
			submit: function() {
				const data = {
					id: this.id
				}
				open(data).then((res) => {
					if (res.code === 200) {
            if(res.data.beans != null){
              uni.showToast({
                title: `获取乐豆${res.data.beans},碎片${res.data.fragment}`,
                icon: "success",
                duration: 2000
              })
              this.loading = false
            }else {
              uni.showToast({
                title: `今天已经开奖，请明天再来`,
                icon: "success",
                duration: 1000
              })
              this.loading = false
            }
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			handleSwitch(index) {
				if (this.currentIndex === index) return
				this.currentIndex = index
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		margin: 0 auto;
		/* padding: 10px; */
		padding-top: 20px;
		background-image: url("@/static/blind/bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;
		color: white;
	}

	.header {
		text-align: center;
		margin-bottom: 30px;
	}

	.main-title {
		font-size: 24px;
		background: linear-gradient(45deg, #fff, #fff);
		color: rgb(153, 23, 255);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: glow 2s ease-in-out infinite;
	}



	.slide {
		width: 85%;
		margin: 0 auto;
		margin-top: 20px;
		border-radius: 40px;
		height: 65px;
		border: 6px solid #373a61;
		background-color: #b7b1e1;

		.slide-scorll {
			overflow: hidden;
			/* 隐藏溢出部分 */
			white-space: nowrap;
			scrollbar-width: none;
			width: 92%;
			margin-left: 5px;
			-ms-overflow-style: none;

			.scroll-content {
				display: inline-block;
				animation: scroll 20s linear infinite;
				/* 应用滚动动画 */
			}

			.img {
				padding-top: 8px;
				width: 50px;
				height: 50px;
				margin-left: 15px;
			}
		}

		/* 对于Webkit内核浏览器（Chrome, Safari等） */
		.slide-scorll::-webkit-scrollbar {
			display: none;
		}
	}

	/* 新增滚动样式 */
	.image-scroll-wrapper {
		margin: 15px 0;
		position: relative;
		width: 80%;
		margin: 0 auto;
		margin-top: 20px;
		border-radius: 40px;
		border: 6px solid #373a61;
		background-color: #b7b1e1;
	}

	.image-scroll {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		height: 70px;
		padding: 0 20px;
		-webkit-overflow-scrolling: touch;
		/* 优化移动端滚动 */
	}

	.image-item {
		flex: 0 0 auto;
		width: 50px;
		height: 50px;
		scroll-snap-align: center;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s;
	}

	.image-item img {
		width: 50px;
		height: 50px;
		object-fit: cover;
	}

	/* 滚动条样式 */
	.image-scroll::-webkit-scrollbar {
		height: 6px;
	}

	.image-scroll::-webkit-scrollbar-track {
		background: #2c3e50;
	}

	.image-scroll::-webkit-scrollbar-thumb {
		background: #ff6b6b;
		border-radius: 3px;
	}

	/* 移动端适配 */
	@media (max-width: 768px) {
		.image-item {
			width: 250px;
			height: 120px;
		}

		.image-scroll {
			padding: 0 15px;
		}
	}

	.dou {
		width: 100%;
		display: flex;
		justify-content: center;
		color: #fff;
		margin-top: 20px;

		.dou-left {
			background-color: #8d35a1;
			background: linear-gradient(to right, #8d35a1, #32236d);
			margin-right: 75px;
			display: flex;
			font-size: 15px;
			padding: 1px 8px 1px 1px;

			image {
				width: 25px;
				height: 25px;
			}

			:nth-child(2) {
				line-height: 25px;
				margin-left: 4px;
			}
		}

		.dou-right {
			background-color: #8d35a1;
			display: flex;
			background: linear-gradient(to right, #8d35a1, #32236d);
			font-size: 15px;
			padding: 1px 8px 1px 1px;

			image {
				width: 25px;
				height: 25px;
			}

			:nth-child(2) {
				line-height: 25px;
				margin-left: 4px;
			}
		}
	}

	.assets {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.card-scroll {
		display: flex;
		overflow-x: auto;
		gap: 15px;
		padding: 10px 0;
	}

	.box-card {
		flex-shrink: 0;
		width: 100px;
		height: 120px;
		background: linear-gradient(45deg, #4ecdc4, #45b7af);
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.box-card:hover {
		transform: scale(1.05);
	}

	.btn-primary {
		background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
		padding: 12px 24px;
		border: none;
		border-radius: 25px;
		color: white;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.progress {
		height: 20px;
		background: #2c3e50;
		border-radius: 10px;
		margin: 20px 0;
		position: relative;
	}

	.progress-bar {
		height: 100%;
		background: linear-gradient(90deg, #f9d423 0%, #ff4e50 100%);
		border-radius: 10px;
		transition: width 0.5s ease;
	}

	@keyframes glow {
		0% {
			filter: drop-shadow(0 0 5px #ff9a00);
		}

		50% {
			filter: drop-shadow(0 0 20px #ffd700);
		}

		100% {
			filter: drop-shadow(0 0 5px #ff9a00);
		}
	}

	@media (max-width: 768px) {
		.card-scroll {
			scroll-snap-type: x mandatory;
		}

		.box-card {
			scroll-snap-align: start;
		}
	}


	.tab-container {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 30rpx;
		height: 400px;
	}

	.tab-nav {
		display: flex;
		width: 84%;
		margin: 0 auto;
		border-radius: 20px;
		justify-content: center;
		margin-bottom: 40rpx;
		border: 1px solid #644ddd;
	}

	.tab-button {
		width: 45px;
		height: 28px;
		border-radius: 30px;
		transition: all 0.3s ease;
		color: #fff;
		text-align: center;
		font-size: 15px;
		line-height: 28px;

		&.active {
			background-color: #644ddd;
			transform: scale(1.1);
		}
	}

	.tab-content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 24rpx;
	}

	.content-item {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content-image {
		max-width: 100%;
		max-height: 280px;
		transition: opacity 0.3s;
		position: relative;
		top: 15px;
		animation: pulse-scale 3s infinite;
		cursor: pointer;
		z-index: 99;

		&.loaded {
			opacity: 1;
		}
	}

	@keyframes pulse-scale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 悬停时暂停动画 */
	.content-image:hover {
		animation-play-state: paused;
		transform: scale(1.08);
	}


	.content-right {
		position: absolute;
		top: 120px;
		right: 10px;

		.right-kx {
			width: 114rpx;
			height: 113rpx;
		}

		.right-lj {
			margin-top: 10px;
			width: 114rpx;
			height: 113rpx;
		}
	}

	.btn {
		padding: 12px 24px;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		background-color: #2c3e50;
		cursor: pointer;
		transition: all 0.3s ease;
		margin: 10px;
		// position: relative;
		// top: 20px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* 3D立体按钮 */
	.btn-3d {
		background: #644ddd;
		color: white;
		box-shadow: 0 5px 0 #644ddd;
		position: relative;
		top: 0;
	}

	.btn-3d:hover {
		top: 2px;
		box-shadow: 0 3px 0 #644fdf;
	}

	.btn-3d:active {
		top: 5px;
		box-shadow: none;
	}

	/* 霓虹效果按钮 */
	.neon-btn {
		background: #0d4990;
		color: #fff;
		border: 3px solid #0d2b70;
		box-shadow: 0 0 10px #0d357e,
			inset 0 0 10px #0d357e;
		text-shadow: 0 0 5px #0d357e;
		position: relative;
		top: 0;
	}

	.neon-btn:hover {
		animation: neon-pulse 1s infinite;
		top: 2px;
		box-shadow: 0 3px 0 #0d357e;
	}

	.neon-btn:active {
		top: 5px;
		box-shadow: none;
	}

	.bottom {
		position: fixed;
		bottom: 60px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.center {
			width: 100%;
			text-align: center;

			image {
				width: 120px;
				height: 40px;
			}
		}

		.bottom-right {
			text-align: center;
			position: absolute;
			right: 20px;
			top: -60px;

			:nth-child(1) {
				font-size: 35px;
				color: #bd7df6;

			}

			:nth-child(2) {
				font-size: 15px;
				color: #fff;
			}
		}
	}
</style>
